/*
 * @Author: your name
 * @Date: 2021-04-12 00:21:10
 * @LastEditTime: 2021-12-01 10:07:55
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /fun_android/lib/ui/page/coin/coin_ranking_list_page.dart
 */
import 'package:flutter/material.dart';
import 'package:full_flutter/provider/provider_widget.dart';
import 'package:full_flutter/provider/view_state_widget.dart';
import 'package:full_flutter/ui/helper/refresh_helper.dart';
import 'package:full_flutter/ui/widget/skeleton.dart';
import 'package:full_flutter/view_model/coin_model.dart';
import 'package:full_flutter/view_model/user_model.dart';
import 'package:provider/provider.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

///积分排行榜
class CoinRankingListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    UserModel userModel = Provider.of<UserModel>(context);
    String selfName = userModel.user!.username.replaceRange(1, 3, '**');
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('积分排行榜'),
      ),
      body: ProviderWidget<CoinRankingListModel>(
        model: CoinRankingListModel(),
        onModelReady: (model) => model.initData(),
        builder: (context, model, child) {
          if (model.isBusy) {
            return SkeletonList(
              length: 11,
              builder: (context, index) => CoinRankingListItemSkeleton(),
            );
          } else if (model.isError && model.list.isEmpty) {
            return ViewStateErrorWidget(
                error: model.viewStateError, onPressed: model.initData);
          } else if (model.isEmpty) {
            return ViewStateEmptyWidget(onPressed: model.initData);
          }
          return SmartRefresher(
            controller: model.refreshController,
            header: WaterDropHeader(),
            footer: RefresherFooter(),
            onRefresh: model.refresh,
            onLoading: model.loadMore,
            enablePullUp: true,
            child: ListView.separated(
              itemCount: model.list.length,
              separatorBuilder: (context, index) => Divider(
                indent: 10,
                endIndent: 10,
                height: 1,
              ),
              itemBuilder: (context, index) {
                Map item = model.list[index];
                String userName = item['username'];
                String coinCount = item['coinCount'].toString();
                return ListTile(
                  dense: true,
                  contentPadding:
                      EdgeInsets.symmetric(horizontal: 25, vertical: 10),
                  onTap: () {},
                  leading: Text('${index + 1}'),
                  title: Text(userName,
                      style: TextStyle(
                          fontSize: 16,
                          color: selfName == userName
                              ? Colors.amberAccent
                              : null)),
                  trailing: Text(
                    coinCount,
                    style: TextStyle(
                        color: Theme.of(context).colorScheme.secondary),
                  ),
                );
              },
            ),
          );
        },
      ),
    );
  }
}

class CoinRankingListItemSkeleton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BottomBorderDecoration(),
      child: ListTile(
          dense: true,
          contentPadding: EdgeInsets.symmetric(horizontal: 25, vertical: 10),
          title: Row(
            children: <Widget>[
              SkeletonBox(width: 20, height: 10),
              SizedBox(width: 20),
              SkeletonBox(width: 250, height: 10)
            ],
          ),
          trailing: SkeletonBox(width: 20, height: 10)),
    );
  }
}
